<template>
  <div class="edit" style="margin-top: 15px;line-height:0px;height:300px;width:96.5%">
    <quill-editor
      ref="textEditor"
      v-model.trim="articleContent"
      :options="editorOption"
      @change="onEditorChange($event)"/>
    <el-row class="statistics">
      <el-col :span="24">
        <span style="background-clor">字数统计:{{ fontCount }}</span>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {quillEditor} from 'vue-quill-editor'
export default{
  props: {
    editor: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            ['clean'],
            [{ 'align': [] }, 'image'],
            ['formula'],
            [{ 'color': [] }, { 'background': [] }]
          ]
        }

      },
      articleContent: this.editor.discription,
      fontCount: 0
    }
  },
  watch: {
    editor: function(newVal, oldVal) {
      this.editor = newVal
    }
  },
  created() {

  },
  mounted() {
    this.length()
  },
  methods: {
    onEditorChange({ editor, html, text }) {
      this.fontCount = text.length - 1
      const editorText = {
        discription: this.articleContent,
        text: text
      }
      this.$emit('context', editorText)
    },
    length() {
      debugger
      if (this.editor.text === null) {
        this.fontCount = 0
      } else {
        this.fontCount = this.editor.text.length
      }
    }
  }
}
</script>
<style>
.quill-editor {
  height: 90%;
}
.statistics {
  height: 8%;
  line-height: 24px;
  text-align: right;
  background-color: #f5f9f8;
  margin-top: 1px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 75%;
}
</style>

